<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>040-盒模型外边距.html</title>
	<style>
		.father{
			border: 1px solid #000;
		}
		.father div{
			width: 100px;
			height: 100px;
			display: inline-block;
			vertical-align: bottom;
		}
		#son1{
			background: yellow;
		}
		#son2{
			background: red;
			/*
			margin-top: 10px;
			margin-right: 20px;
			margin-bottom: 30px;
			margin-left: 40px;
			*/
			/*margin: 10px 20px 30px 40px;*/
			/*margin: 10px 20px 30px;*/
			/*margin-left: -50px;*/
			margin: 50px;
		}
		#son3{
			background: blue;
		}
	</style>
</head>
<body>
	<div class="father">
		<div id="son1"></div>
		<div id="son2"></div>
		<div id="son3"></div>
	</div>
</body>
</html>